<template>
  <div class="main-tab">
    <x-header id="header" :left-options="{showBack: false}">发现</x-header>
    <div class="main-headerAndTab">
      <div class="part1">
        <div class="part1-header" @click="goPoster" >
          <img class="title-icon" src="../../../static/img/find-1.png" />
          <div class="title">展示海报</div>
          <div class="more">查看更多</div>
          <img class="more-icon"  src="../../../static/img/right.png" />
        </div>
        <div class="part1-body">
          <div class="poster" v-for=" item in posterList" @click="goPoster({id:item.id})">
            <img class="poster-img" :src="item.url" />
            <p class="poster-theme">{{item.theme}}</p>
          </div>
        </div>
      </div>
      <div class="part2">
        <div class="part2-header" @click="goArticle">
          <img class="title-icon" src="../../../static/img/find-2.png" />
          <div class="title">咨询</div>
          <!--<div class="more">查看更多</div>-->
          <!--<img class="more-icon"  src="../../../static/img/right.png" />-->
        </div>
        <div class="part2-body">
          <div class="article" v-for="item in articleList" @click="goArticle({id:item.id})">
            <div class="article-left">
              <div class="article-title">{{item.title}}</div>
              <div class="article-date">{{item.createTime}}</div>
            </div>
            <img :src="item.picture" class="article-img" />
          </div>
        </div>
      </div>
    </div>
    <b-tabbar :value="2" />
  </div>
</template>

<script>
import bTabbar from '../../components/Btabbar'
import { getArticleList } from '@/api/article'
import { getPosterList } from '@/api/user'
import { cookie } from 'vux'

export default {
  name: 'find',
  components: {
    bTabbar,
  },
  data () {
    return {
      posterList:[
        {
          url: require('../../../static/img/3.jpg'),
          theme: '2019暴富',
          id: 0
        },
        {
          url: require('../../../static/img/3.jpg'),
          theme: '2019暴富',
          id: 1
        },
        {
          url: require('../../../static/img/3.jpg'),
          theme: '2019暴富',
          id: 2
        },
      ],
      articleList: [
        {
          title: '1月新增贷款或超预期，2019年信贷规模会更吃紧？',
          createTime: '2019-02-14',
          picture: require('../../../static/img/4.jpg'),
          id: 0
        },
        {
          title: '1月新增贷款或超预期，2019年信贷规模会更吃紧？',
          createTime: '2019-02-14',
          picture: require('../../../static/img/4.jpg'),
          id: 1
        },
        {
          title: '1月新增贷款或超预期，2019年信贷规模会更吃紧？',
          createTime: '2019-02-14',
          picture: require('../../../static/img/4.jpg'),
          id: 2
        }
      ]
    }
  },
  methods: {
    goPoster ({id}) {
      if (!id) {
        this.$router.push('poster')
      } else {
        this.$router.push({
          name: 'poster',
          query: {
            id: id
          }
        })
      }
    },
    goArticle ({id}) {
      console.log(id)
      if (!id) {
        this.$router.push('article')
      } else {
        this.$router.push({
          name: 'article',
          query: {
            id: id
          }
        })
      }
    }
  },
  mounted () {
    getArticleList().then( data => {
      this.articleList = data.data
    })
    getPosterList().then( data => {
      this.posterList = data.data
    })
  }
}
</script>

<style scoped>
.part1 {
  background: #fff;
  margin-top: 1rem;
}
.part1-header, .part2-header {
  padding: 1rem 0.9rem;
  display: flex;
}
.title-icon {
  height: 1.5rem;
  width: 1.5rem;
  padding-right: 0.75rem;
}
.title {
  flex: 1;
  line-height: 1.5rem;
  color: #8D8D8D;
}
.more {
  line-height: 1.5rem;
  color: #8D8D8D;
}
.more-icon {
  margin:auto 0 auto 0.75rem;
  height: 0.95rem;
  width: 0.65rem;
}
.part1-body {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
}
.poster-img {
  height: 9.6rem;
  width: 7.5rem;
  border-radius: 4px;
  margin-bottom: 0.7rem;
}
.poster-theme {
  color: #8D8D8D;
  text-align: center;
  line-height: 1.5rem;
}
.part2 {
  background: #fff;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.article {
  display: flex;
  padding: 1rem;
}
.article-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.article-title {
  color: #5B5B5B;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-date {
  color: #8D8D8D;
}
.article-img {
  padding-left: 1rem;
  height: 5.7rem;
  width: 8.5rem;
  border-radius: 4px;
}
</style>
